import React, { useEffect } from "react";
import { useSetState, useRequest } from "ahooks";
import { Card, Button, Empty } from "react-vant";
import { useNavigate } from "react-router-dom";
import LeftArrow from "../LeftArraw";
import style from "./style.module.scss";
import { getHttp, putHttp } from "../../../../api";
import { useAppSelector } from "../../../../store/hooks";

// 定义请求接口参数的类型
interface CurrentInquiryRecordHeader {
  userId: number;
  sessionId: string;
}

// 定义请求接口返回数据的类型
interface CurrentInquiryRecordResult {
  recordId?: number;
  doctorId?: number;
  imagePic?: string;
  doctorName: string;
  department: string;
  jobTitle: string;
  evaluateStatus?: number;
  userName?: string;
  jiGuangPwd?: string;
  inquiryTime: string;
}

const Index: React.FC = () => {
  const userId = useAppSelector((state) => state.user.userInfo.userId);
  const sessionId = useAppSelector((state) => state.user.userInfo.sessionId);
  const [consultationInfo, setConsultationInfo] =
    useSetState<CurrentInquiryRecordResult>({} as CurrentInquiryRecordResult);

  // 定义当前问诊记录的请求参数，并使用useSetState hook初始化为默认值
  const [inquiryParams, setInquiryParams] =
    useSetState<CurrentInquiryRecordHeader>({
      userId: userId,
      sessionId: sessionId,
    });

  // 定义获取当前问诊记录的函数
  const getCurrentInquiryRecord = () =>
    getHttp(
      "/health/user/inquiry/verify/v1/findCurrentInquiryRecord",
      inquiryParams
    ).then((res) => {
      setConsultationInfo(res.result);
    });


  // 使用useNavigate hook获取导航函数，用于跳转页面
  const navigate = useNavigate();

  const Endaninterview = () => {
    const recordId = consultationInfo.recordId;
    putHttp(
      `/health/user/inquiry/verify/v1/endInquiry?recordId=${recordId}`,
      inquiryParams
    );

    navigate("/my");
  };

  // 使用useEffect hook在组件渲染后发起请求，获取当前问诊记录的数据
  useEffect(() => {
    getCurrentInquiryRecord();
  }, [inquiryParams]);

  // 渲染组件
  return consultationInfo && Object.keys(consultationInfo).length > 0 ? (
    <div>
      <LeftArrow title="当前问诊" />

      <div className={style["demo-image"]}>
        <img
          width="230"
          height="250"
          src={consultationInfo.imagePic}
          className={style.rvimage}
        />
        <Card className={style.card} border>
          <h4>{consultationInfo.doctorName}</h4>
          <p>{consultationInfo.jobTitle}</p>
          <p>{consultationInfo.department}</p>
          <p>问诊时间:{consultationInfo.inquiryTime}</p>
        </Card>
        <div className={style.btn}>
          <Button
            className={style.btn1}
            size="small"
            onClick={() =>
              navigate(
                `/consultation/chat?doctorId=${consultationInfo.doctorId}&recordId=${consultationInfo.recordId}&doctorName=${consultationInfo.doctorName}&imagePic=${consultationInfo.imagePic}`
              )
            }
          >
            继续问诊
          </Button>
          <Button
            className={style.btn2}
            size="small"
            onClick={() => Endaninterview()}
          >
            结束问诊
          </Button>
        </div>
      </div>
    </div>
  ) : (
    <div>
      <LeftArrow title="当前问诊" />

      <Empty description="暂无问诊">
        <Button
          style={{ width: 160 }}
          round
          type="primary"
          onClick={() => navigate("/my")}
        >
          返回
        </Button>
      </Empty>
    </div>
  );
};

export default Index;
